<template>
  <div class="home">
    <!-- Hero Section -->
    <section class="hero-section">
      <div class="container">
        <div class="hero-content">
          <div class="hero-text">
            <h1 class="hero-title fade-in">
              让AI点燃你的
              <span class="gradient-text">创作灵感</span>
            </h1>
            <p class="hero-description slide-up">
              在AI故事坊，每个人都是故事的主角。输入你的想法，让人工智能为你编织出精彩纷呈的故事世界。
            </p>
            <div class="hero-actions slide-up">
              <router-link to="/generate" class="btn btn-primary btn-lg">
                <PenTool :size="20" />
                开始创作
              </router-link>
              <router-link to="/library" class="btn btn-secondary btn-lg">
                <Library :size="20" />
                浏览故事
              </router-link>
            </div>
          </div>
          <div class="hero-visual">
            <div class="floating-cards">
              <div 
                v-for="(card, index) in floatingCards" 
                :key="index"
                class="floating-card"
                :style="{ animationDelay: `${index * 0.5}s` }"
              >
                <component :is="card.icon" :size="24" />
                <span>{{ card.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


    <!-- Popular Stories Section -->
    <section class="popular-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">热门故事</h2>
          <p class="section-description">
            发现社区中最受欢迎的创作
          </p>
        </div>
        
        <div class="stories-grid">
          <div 
            v-for="story in popularStories" 
            :key="story.id"
            class="story-card card"
            @click="goToStory(story.id)"
          >
            <div class="story-header">
              <h3>{{ story.title }}</h3>
              <span class="story-category">{{ story.category }}</span>
            </div>
            <p class="story-excerpt">{{ getExcerpt(story.content) }}</p>
            <div class="story-meta">
              <div class="story-author">
                <User :size="16" />
                <span>{{ story.author }}</span>
              </div>
              <div class="story-stats">
                <div class="stat">
                  <Heart :size="16" />
                  <span>{{ story.likes }}</span>
                </div>
                <div class="stat">
                  <Eye :size="16" />
                  <span>{{ story.views }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="section-footer">
          <router-link to="/library" class="btn btn-ghost">
            查看更多故事
            <ArrowRight :size="16" />
          </router-link>
        </div>
      </div>
    </section>

  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStoriesStore } from '../stores/stories'
import { gsap } from 'gsap'
import { 
  PenTool, 
  Library, 
  Sparkles, 
  Users, 
  TrendingUp, 
  BookOpen,
  User,
  Heart,
  Eye,
  ArrowRight
} from 'lucide-vue-next'

const router = useRouter()
const storiesStore = useStoriesStore()

const floatingCards = ref([
  { icon: Sparkles, text: 'AI创作' },
  { icon: BookOpen, text: '故事管理' },
  { icon: Users, text: '社区互动' },
  { icon: TrendingUp, text: '热门排行' }
])


const popularStories = computed(() => 
  storiesStore.topStories.slice(0, 6)
)

const getExcerpt = (content) => {
  return content.length > 120 ? content.substring(0, 120) + '...' : content
}

const goToStory = (storyId) => {
  router.push(`/story/${storyId}`)
}

onMounted(async () => {
  // 加载故事数据
  try {
    await storiesStore.loadStories({
      status: 'published',
      page: 1,
      page_size: 20
    })
  } catch (error) {
    console.error('加载故事失败:', error)
  }
  
  // Animate elements on scroll
  gsap.fromTo('.fade-in', 
    { opacity: 0, y: 30 },
    { opacity: 1, y: 0, duration: 1, ease: 'power2.out' }
  )
  
  gsap.fromTo('.slide-up', 
    { opacity: 0, y: 50 },
    { opacity: 1, y: 0, duration: 1, delay: 0.3, ease: 'power2.out' }
  )
  
  gsap.fromTo('.floating-card', 
    { opacity: 0, scale: 0.8, rotation: -10 },
    { 
      opacity: 1, 
      scale: 1, 
      rotation: 0, 
      duration: 0.8, 
      ease: 'back.out(1.7)',
      stagger: 0.1
    }
  )
  
})
</script>

<style scoped>
.home {
  min-height: 100vh;
}

/* Hero Section */
.hero-section {
  padding: var(--spacing-3xl) 0;
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
}

.hero-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--spacing-lg);
}

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-2xl);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  height: 400px;
}

.floating-cards {
  position: relative;
  width: 100%;
  height: 100%;
}

.floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--glass-effect);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-weight: 500;
  animation: float 6s ease-in-out infinite;
}

.floating-card:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.floating-card:nth-child(2) {
  top: 10%;
  right: 20%;
  animation-delay: 1.5s;
}

.floating-card:nth-child(3) {
  bottom: 30%;
  left: 20%;
  animation-delay: 3s;
}

.floating-card:nth-child(4) {
  bottom: 20%;
  right: 10%;
  animation-delay: 4.5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.section-title {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-md);
}

.section-description {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* Popular Stories Section */
.popular-section {
  padding: var(--spacing-3xl) 0;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.story-card {
  cursor: pointer;
  transition: all var(--transition-normal);
}

.story-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.story-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.story-header h3 {
  flex: 1;
  margin: 0;
  color: var(--text-primary);
}

.story-category {
  background: var(--gradient-primary);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.story-excerpt {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.story-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.story-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.story-stats {
  display: flex;
  gap: var(--spacing-md);
}

.stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.section-footer {
  text-align: center;
}


/* Mobile Styles */
@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    text-align: center;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-visual {
    height: 300px;
  }


  .stories-grid {
    grid-template-columns: 1fr;
  }

  .story-header {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}
</style>
